Post
Ask Question

Creating Simple Checkboxlist in MVC 4 Using Razor

Introduction 

I have seen many developers get stuck using Checkboxlists in MVC and retrieving values on post. So to make it simple I came up with a simple example of these controls.

Agenda

  1. Creating Model for Checkbox control
  2. Creating Controller
  3. Creating View
  4. Getting checked values of checkbox in Controller Action Method.

Let's start with creating a simple project in MVC 4 by selecting Basic Project template and naming it “MvcCheckbox”.

After adding the project the following is a folder view of the project that was created.



After adding the project let's add a Model.

Adding Model

To add model just right-click the Models folder then select Add then select Class. An Add New Item dialog will popup asking for the class name. Name it “CheckModel” and click on the Add button.



The following is the simple code that was generated by adding the model.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace MvcCheckbox.Models   
  7. {  
  8.     public class CheckModel   
  9.     {  
  10.   
  11.     }  
  12. }  

Now to add properties to CheckModel.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace MvcCheckbox.Models  
  7. {  
  8.     public class CheckModel   
  9.     {  
  10.         public int Id   
  11.         {  
  12.             get;  
  13.             set;  
  14.         }  
  15.         public string Name   
  16.         {  
  17.             get;  
  18.             set;  
  19.         }  
  20.         public bool Checked   
  21.         {  
  22.             get;  
  23.             set;  
  24.         }  
  25.     }  
  26. }  
After adding Model now let's add a Controller.

Adding Controller

To add a new Controller just right-click the Controller folder then select Add then select Controller. An Add Controller dialog will popup asking for the Controller name. Name it “HomeController” and then in the Scaffolding option : Template select “Empty MVC controller“. Finally click on the Add button.



Configuring Controller



The following is the simple Controller code that was generated.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace MvcCheckbox.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Home/  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.   
  19.     }  
  20. }  

Now let's create a list of Checkmodels in the Index Action Method and pass it to the view.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MvcCheckbox.Models;  
  7.   
  8. namespace MvcCheckbox.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.   
  13.         [HttpGet]  
  14.         public ActionResult Index()  
  15.         {  
  16.             var list = new List<CheckModel>  
  17.             {  
  18.                  new CheckModel{Id = 1, Name = "Aquafina", Checked = false},  
  19.                  new CheckModel{Id = 2, Name = "Mulshi Springs", Checked = false},  
  20.                  new CheckModel{Id = 3, Name = "Alfa Blue", Checked = false},  
  21.                  new CheckModel{Id = 4, Name = "Atlas Premium", Checked = false},  
  22.                  new CheckModel{Id = 5, Name = "Bailley", Checked = false},  
  23.                  new CheckModel{Id = 6, Name = "Bisleri", Checked = false},  
  24.                  new CheckModel{Id = 7, Name = "Himalayan", Checked = false},  
  25.                  new CheckModel{Id = 8, Name = "Cool Valley", Checked = false},  
  26.                  new CheckModel{Id = 9, Name = "Dew Drops", Checked = false},  
  27.                  new CheckModel{Id = 10, Name = "Dislaren", Checked = false},  
  28.                   
  29.             };  
  30.             return View(list);  
  31.         }  
  32.   
  33.     } 
  34. } 
Adding View

To add the view just right-click anywhere inside the Action Method Index and select Add.

The Add view dialog will popup with the default View name the same as the Action Method Name.



The following  is the Add View dialog.



After seeing the dialog just click on the Add button.

Simple Index.cshtml will be created.



Some default code will be generated after adding the View.

  1. @{  
  2.    ViewBag.Title = "Index";  
  3. }  
  4. <h2>Index</h2>  
Now let's add a tightly coupled model to the view.

In this I have created a List of CheckModels and took three controls to display the checkbox.

Note

  • HiddenFor: Hiddenfor maintains the ID.
  • DisplayFor: DisplayFor displays the checkbox name (text).
  • CheckboxFor: CheckboxFor displays the checkbox.

I am iterating these controls to create a unique id for each control.

  1. @model List<MvcCheckbox.Models.CheckModel>  
  2. @{  
  3.    ViewBag.Title = "Index";  
  4. }  
  5. <h2>Index</h2>  
  6.   
  7. @using (Html.BeginForm())  
  8. {  
  9.    for (var i = 0; i < Model.Count(); i++)  
  10.    {  
  11.    <table>  
  12.       <tr>  
  13.          <td>  
  14.             @Html.HiddenFor(it => it[i].Id)  
  15.             @Html.DisplayFor(it => it[i].Name)  
  16.          </td>  
  17.          <td>  
  18.             @Html.CheckBoxFor(it => it[i].Checked,new {Style ="vertical-            align:3px}"})  
  19.          </td>  
  20.       </tr>  
  21.    </table>  
  22.   
  23.    }  
  24.   
  25. <input id="Submit1" type="submit" value="submit" />  
  26.   
  27. }  
Now let's run the application and view the Checkbox Control.

To call it just type this URI in your browser window with your localhost port.

http://localhost:##### /Home/index

Output

Adding New Action Method with Action Selector [HttpPost]

Now let's finally add a new Action Method Post for getting values.

  1. [HttpPost]  
  2. public ActionResult Index(List<CheckModel> list)  
  3. {  
  4.     return View(list);  
  5. }  
Complete view of Controller after adding both Action selector
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MvcCheckbox.Models;  
  7.   
  8. namespace MvcCheckbox.Controllers  
  9. {  
  10.     public class HomeController : Controller  
  11.     {  
  12.   
  13.         [HttpGet]  
  14.         public ActionResult Index()  
  15.         {  
  16.             var list = new List<CheckModel>  
  17.             {  
  18.                  new CheckModel{Id = 1, Name = "Aquafina", Checked = false},  
  19.                  new CheckModel{Id = 2, Name = "Mulshi Springs", Checked = false},  
  20.                  new CheckModel{Id = 3, Name = "Alfa Blue", Checked = false},  
  21.                  new CheckModel{Id = 4, Name = "Atlas Premium", Checked = false},  
  22.                  new CheckModel{Id = 5, Name = "Bailley", Checked = false},  
  23.                  new CheckModel{Id = 6, Name = "Bisleri", Checked = false},  
  24.                  new CheckModel{Id = 7, Name = "Himalayan", Checked = false},  
  25.                  new CheckModel{Id = 8, Name = "Cool Valley", Checked = false},  
  26.                  new CheckModel{Id = 9, Name = "Dew Drops", Checked = false},  
  27.                  new CheckModel{Id = 10, Name = "Dislaren", Checked = false},  
  28.                   
  29.             };  
  30.             return View(list);  
  31.         }  
  32.   
  33.         [HttpPost]  
  34.         public ActionResult Index(List<CheckModel> list)  
  35.         {  
  36.             return View(list);  
  37.         }  
  38.   
  39.     }  
  40. }  
Now let's test by checking the checkbox and posting values to the controller.

I have checked the Aquafina , Bisleri and Himalayan values. I should get the value marked true in the Controller.

Output: View with Checked checkboxes



Finally retrieve the values after posting the values from the View to the Controller.

Here I have the values marked as true that I have checked in the View.

I have checked the Aquafina, Bisleri and Himalayan values (0, 5 and 6) that are true and the rest are false.

Output: Values retrieved at Controller [HttpPost] Action selector.



Conclusion

This completes the article on CheckboxFor in MVC4.


Similar Articles